<template>
  <div id="main">
      <section id="TopNav">
          <div id="top">
              <span id="return">&lt;</span>
              <div id="Toptext">提交订单</div>
          </div>
      </section>
      <div id="body">
          <div class="subject address">
              <p>收货地址：陕西省西安市雁塔区高新六路52号 丽人科技 3号楼</p>
              <p class="user"><span>小河里21312321</span>&nbsp;<span>189 9296 5913</span></p>
              <span class="Right-parenthesis">&gt;</span>
          </div>
          <div class="subject goods" v-for="(v,i) in arr" :key="i">
              <p><i class="iconfont icon-shouye"> {{v.sname}}</i></p>
              <div class="goods-main">
                  <div class="goods-img"><img :src="v.imgurl" alt=""></div>
                  <div>
                      <p class="goods-introduce">{{v.gname}}</p>
                      <p class="goods-size">{{v.gsize}}</p>
                      <p></p>
                  </div>
                  <div>
                      <p class="goods-UnitPrice">￥{{v.gpirce}}.00</p>
                      <p class="goods-size goods-number">x{{v.gnum}}</p>
                  </div>
              </div>
              <div class="buy">
                  <span class="buy-num">购买数量
                      <b>限购60份</b>
                  </span>
                  <div class="buy-pushbutton">
                      <button @click="reduce(i)">-</button>
                      <input class="buy-add" type="number" :value="v.gnum">
                      <button @click="add(i)">+</button>
                  </div>
              </div>
          </div>
          <div class="subject other">
              <p><span>配送方式</span><span>快递包邮</span></p>
              <p><span>平台保障</span><span>迟到升级 爽约赔偿 8天修补</span></p>
              <p><span>店铺优惠卷</span><span>暂无可用优惠卷</span></p>
              <p><span>平台优惠卷</span><span>暂无可用优惠卷</span></p>
              <p><span>店铺VIP卡</span><span><i class="iconfont icon-vip1"></i>购卡立享优惠></span></p>
          </div>
          <div class="subject text">
              <textarea maxlength="100"  placeholder="备注:给商家留言，不超过100字"></textarea>
          </div>
      </div>
      <footer class="subject footer">
          <div>
              <span class="footer-num">共{{count}}件</span>
              <span class="footer-total">合计:</span>
              <span class="footer-pirce">￥{{sum}}.00</span>
          </div>
          <button class="footer-payment">去支付</button>
      </footer>
  </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
export default {
    props:["sid","sname","imgurl","gname","gsize","gpirce","gnum"],
    data(){
       return{
           arr:[],
           checkall:false
       }
   },
   mounted(){
       getlink("/data/list/value").then((ok)=>{
           console.log(ok.data)
           this.arr=ok.data
          //  this.arr=this.arr.slice(0,3)
       })
   },
   methods:{
       add(i){
          this.arr[i].gnum++
       },
       reduce(i){
          if(this.arr[i].gnum<=1){
            this.arr[i].gnum=1 
          }else{
            this.arr[i].gnum--;
          }
       },
   },
   computed:{
     sum(){
       var total=0;
       for (var i=0;i<this.arr.length;i++){
        
           total+=parseFloat(this.arr[i].gpirce)*parseFloat(this.arr[i].gnum)
         
         
       }
       return total;
     },
     count(){
         var num=0;
         for (var i=0;i<this.arr.length;i++){
             num+=parseInt(this.arr[i].gnum)
         }
         return num;
        
     }
   },   
        
}
</script>

<style scoped>
    @import url("http://at.alicdn.com/t/font_2793663_f7glckrincm.css");
    #TopNav{
        width: 100%;
        height: 1rem;
        position: fixed;
        top: 0;
        background-color:rgb(254, 254, 254);
    }
    #top{
        position: relative;
    }
    #return{
        font-size: 0.3rem;
        position: absolute;
        top: 0.3rem;
        left: 4%;    
    }
    #Toptext{
        text-align: center;
        line-height: 1rem;
        font-size: 0.3rem;
    }
    #body{
        display:inline-block;
        width: 100%;
        margin-top: 1rem;
        background-color: #f7f7f7;
    }
    .subject{
        display: inline-block;
        width: 96%;
        margin-top: 0.2rem;
        padding: 0.3rem 0.3rem 0.3rem 0.3rem;
        border-radius: 0.2rem;
        background-color: rgb(254, 254, 254);
        font-size: 0.3rem;
        box-sizing: border-box;
        line-height: 0.45rem;
    }
    .address{
        position: relative;
    }
    .user{
        color: #666666;
        font-size: 0.2rem;
    }
    .Right-parenthesis{
        position: absolute;
        top: 0.6rem;
        left: 7rem;
    }


    /* subject goods */
    .icon-shouye{
        font-size: 0.2rem;
    }
    .goods-main{
        display: flex;
    }
    .goods-img{
        width: 1.6rem;
        height: 1.6rem;
    }
    .goods-img img{
        width: 1.6rem;
        height: 1.6rem;
    }
    .goods-introduce{
        font-size: 0.3rem;
    }
    .goods-size{
        color: #666666;
    }
    .goods-number{
        text-align: right;
    }


    /* buy */
    .buy{
        display: flex;
        justify-content: space-between;
    }
    .buy-add{
        width: 0.4rem;
        text-align: center;
    }
    .buy-pushbuttton{
        display: inline-block;
    }
    .buy-pushbutton button{
        width: 0.3rem;
    }

    /* other */
    .other{
        
    }
    .other p{
        margin-bottom: 0.3rem;
        display: flex;
        justify-content: space-between;
    }
    .other p span:nth-of-type(2){
        color: #999999;
    }
    .icon-vip1{
        color: red;
    }


    /* text */
    .text{
        width: 97%;
        margin-bottom: 1.1rem;
    }
    .text textarea{
        width: 100%;
        height: 0.4rem;
        resize: none;
        overflow-y: hidden;
        
    }


    /* footer */
    .footer{
        display: block;
        display: flex;
        justify-content: space-between;
        height: 1.1rem;
        width: 100%;
        position: fixed;
        bottom: 0;
    }
    .footer-num{
        margin-right: 0.15rem;
        color: rgb(153, 153, 153);
        font-size: 0.1rem;
    }
    .footer-total{
        color: rgb(33, 33, 33);
        font-size: 0.1rem;
    }
    .footer-pirce{
        color: rgb(175, 29, 29);
        font-size: 0.4rem;
        align-items: flex-end;
        margin-left: 0.2rem;
    }
    .footer-payment{
        width: 2rem;
        height: 0.6rem;
        border-radius: 1rem;
        color: white;
        font-size: 0.3rem;
        line-height: 1;
        background: rgb(207, 178, 144) !important;
        border: none;
    }
</style>